<template>
    <div class="contener">
        <div class="page edit-page">
            <div class="tab-contener">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本信息" name="first">
                        <div class="tab-pane-conetenr">
                            <base-form
                                :formItems="basicFormConfig.formItems"
                                :formData="basicFormConfig.formSubmit"
                                :formConfig="basicFormConfig.formConfig"
                                :formRules="basicFormConfig.formRule"
                                ref="basicInfoForm"
                            />
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="字段信息" name="second">
                        <div class="tab-pane-conetenr">
                            <base-table
                                ref="sconfigModelTable"
                                :tableData="configBusModelTableConfig.tableData"
                                :tableHeader="
                                    configBusModelTableConfig.tableHeader
                                "
                                :tableConfig="
                                    configBusModelTableConfig.tableConfig
                                "
                            >
                                <template slot-scope="{ scope }">
                                    <el-checkbox
                                        v-if="
                                            scope.type === 'isRequiredCheckBox'
                                        "
                                        v-model="scope.row.required"
                                    />
                                    <el-checkbox
                                        v-if="scope.type === 'isListCheckBox'"
                                        v-model="scope.row.list"
                                    />
                                    <el-checkbox
                                        v-if="scope.type === 'isInsertCheckBox'"
                                        v-model="scope.row.insert"
                                    />
                                    <el-checkbox
                                        v-if="scope.type === 'isEditCheckBox'"
                                        v-model="scope.row.edit"
                                    />
                                    <el-checkbox
                                        v-if="scope.type === 'isQueryCheckBox'"
                                        v-model="scope.row.query"
                                    />
                                    <el-select
                                        v-if="scope.type === 'queryTypeSelect'"
                                        v-model="scope.row.queryType"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in queryTypeList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                    <el-select
                                        v-if="scope.type === 'htmlTypeSelect'"
                                        v-model="scope.row.htmlType"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in htmlTypeList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                    <el-select
                                        v-if="scope.type === 'dictTypeSelect'"
                                        v-model="scope.row.dictType"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in dictTypeList"
                                            :key="item.type"
                                            :label="item.name"
                                            :value="item.type"
                                        />
                                    </el-select>
                                </template>
                            </base-table>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="生成信息" name="third">
                        <div class="tab-pane-conetenr">
                            <base-form
                                :formItems="genInfoFormConfig.formItems"
                                :formData="genInfoFormConfig.formSubmit"
                                :formConfig="genInfoFormConfig.formConfig"
                                :formRules="genInfoFormConfig.formRule"
                                ref="basicInfoForm"
                            />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="footer-contener">
                <el-button size="small" @click="handelBack">
                    返 回
                </el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="handelCofimeUpdate"
                    >确 定</el-button
                >
            </div>
        </div>
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index'
import { getInfo, editSave } from '@/http/apis/tool/gen/index'
import { getDictDatas } from '@/plugins/dict'
import BaseTable from '@/components/baseTable/index'
import { menuTreeselect } from '@/http/apis/system/menu/index'
import { setFormItemProp } from '@/utils/tool'
import { optionselect } from '@/http/apis/system/dict/type'
import { mapActions } from 'vuex'
export default {
    name: 'EditForm',
    components: {
        BaseForm,
        BaseTable
    },
    dicts: ['gen_template_type', 'gen_code_type'],
    data() {
        return {
            // 通用树组件配置
            baseTreeConfig: {
                // tree的数据
                data: [],
                // tree的加载状态
                loading: false,
                // tree选中的树
                currentNodeKey: '',
                // 过滤显示
                filterShow: true,
                entity: {}
            },
            storageList: getDictDatas('sys_file_storage'),
            activeName: 'second',
            buttonConfig: {
                leftConfig: [
                    {
                        prop: 'addTableData',
                        label: '新增',
                        icon: 'el-icon-plus',
                        type: 'primary',
                        disabled: false,
                        hasPermi: ['system/post/save']
                    },
                    {
                        prop: 'deleteTableData',
                        label: '删除',
                        icon: 'el-icon-delete',
                        type: 'danger',
                        disabled: false,
                        hasPermi: ['system/post/delete']
                    },
                    {
                        prop: 'exportTableData',
                        label: '导出',
                        icon: 'el-icon-download',
                        type: 'info',
                        disabled: false
                    }
                ],
                rightConfig: []
            },

            // 查询表格数据的参数
            queryTableParams: {
                pageNo: 0,
                pageSize: 10,
                entity: {}
            },
            //查询方式列表
            queryTypeList: [
                { value: '=', label: 'EQ' },
                { value: '!=', label: 'NE' },
                { value: '>', label: 'GT' },
                { value: '>=', label: 'GTE' },
                { value: '<', label: 'LT' },
                { value: '<=', label: 'LTE' },
                { value: 'LIKE', label: 'LIKE' },
                { value: 'BETWEEN', label: 'BETWEEN' }
            ],
            //显示方式列表
            htmlTypeList: [
                { value: 'input', label: '文本框' },
                { value: 'textarea', label: '文本域' },
                { value: 'select', label: '下拉框' },
                { value: 'radio', label: '单选框' },
                { value: 'datetime', label: '日期控件' }
            ],
            //数据字典列表
            dictTypeList: [],

            // 基本信息
            basicFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入表名称',
                            label: '表名称',
                            prop: 'tableName',
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入表描述',
                            label: '表描述',
                            prop: 'tableComment',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入实体类名称',
                            label: '实体类名称',
                            prop: 'className',
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入作者',
                            label: '作者',
                            prop: 'functionAuthor',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            type: 'textarea',
                            placeholder: '请输入备注',
                            label: '备注',
                            prop: 'remark',
                            width: 'w-1'
                        }
                    ]
                ],
                // 提交项
                formSubmit: {
                    tableName: '',
                    tableComment: '',
                    className: '',
                    functionAuthor: '',
                    remark: ''
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '100px'
                },
                // 验证项
                formRule: {
                    tableName: [
                        {
                            required: true,
                            message: '请输入表名称',
                            trigger: 'blur'
                        }
                    ],
                    tableComment: [
                        {
                            required: true,
                            message: '请选择表面搜书',
                            trigger: 'blur'
                        }
                    ],
                    className: [
                        {
                            required: true,
                            message: '请输入实体名称',
                            trigger: 'blur'
                        }
                    ],
                    functionAuthor: [
                        {
                            required: true,
                            message: '请输入作者',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            // 生成信息
            genInfoFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'select',
                            placeholder: '请输入生成模板',
                            label: '生成模板',
                            prop: 'tplCategory',
                            width: 'w-1',
                            options: getDictDatas('gen_template_type'),
                            disabled: true
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入生成包路径',
                            label: '生成包路径',
                            prop: 'packageName',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入生成模块名称',
                            label: '生成模块名称',
                            prop: 'moduleName',
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入生成业务名称',
                            label: '生成业务名称',
                            prop: 'businessName',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入生成功能名称',
                            label: '生成功能名称',
                            prop: 'functionName',
                            width: 'w-1'
                        },
                        {
                            ltype: 'treeSelect',
                            placeholder: '请输入上级菜单',
                            label: '上级菜单',
                            prop: 'parentMenuId',
                            multiple: false,
                            options: [],
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'radio',
                            placeholder: '请输入生成代码方式',
                            label: '生成代码方式',
                            prop: 'genType',
                            width: 'w-1',
                            options: getDictDatas('gen_code_type')
                        }
                    ]
                ],
                // 提交项
                formSubmit: {
                    tplCategory: 'crud',
                    packageName: '',
                    moduleName: '',
                    businessName: '',
                    functionName: '',
                    parentMenuId: '',
                    genType: '',
                    remark: ''
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '110px'
                },
                // 验证项
                formRule: {
                    tplCategory: [
                        {
                            required: true,
                            message: '请选择模板名称',
                            trigger: 'blur'
                        }
                    ],
                    packageName: [
                        {
                            required: true,
                            message: '请输入生成包路径',
                            trigger: 'blur'
                        }
                    ],
                    moduleName: [
                        {
                            required: true,
                            message: '请输入生成模块名称',
                            trigger: 'blur'
                        }
                    ],
                    businessName: [
                        {
                            required: true,
                            message: '请输入生成业务名称',
                            trigger: 'blur'
                        }
                    ],
                    functionName: [
                        {
                            required: true,
                            message: '请输入生成功能名称',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            //字段信息
            configBusModelTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'columnName',
                        label: '列名称',
                        width: 200,
                        visible: true
                    },
                    {
                        prop: 'columnComment',
                        label: '列描述',
                        showOverflowTooltip: true,
                        visible: true
                    },
                    {
                        prop: 'javaType',
                        label: 'Java类型',
                        width: 80,
                        visible: true
                    },
                    {
                        prop: 'javaField',
                        label: 'java属性',
                        visible: true
                    },
                    {
                        type: 'isInsertCheckBox',
                        prop: 'insert',
                        label: '插入',
                        width: 60,
                        visible: true
                    },
                    {
                        type: 'isEditCheckBox',
                        prop: 'edit',
                        label: '编辑',
                        width: 60,
                        visible: true
                    },
                    {
                        type: 'isListCheckBox',
                        prop: 'list',
                        label: '列表',
                        width: 60,
                        visible: true
                    },
                    {
                        type: 'isQueryCheckBox',
                        prop: 'query',
                        label: '查询',
                        width: 60,
                        visible: true
                    },
                    {
                        type: 'queryTypeSelect',
                        prop: 'queryType',
                        label: '查询条件',
                        visible: true
                    },
                    {
                        type: 'isRequiredCheckBox',
                        prop: 'required',
                        label: '必填',
                        width: 60,
                        visible: true
                    },
                    {
                        prop: 'htmlType',
                        type: 'htmlTypeSelect',
                        label: '显示类型',
                        visible: true
                    },
                    {
                        label: '字典类型',
                        type: 'dictTypeSelect',
                        prop: 'dictType',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            }
        }
    },
    created() {
        this.initPage(this.$route.params.tableId)
    },
    methods: {
        ...mapActions('tags', ['delView']),
        /**
         * 页面开始
         */
        async initPage(id) {
            console.log('id =============', id)
            // 查询岗位列表
            this.queryTableData(id)
            // 查询部门树列表
            await this.queryDeptTree()
            //查询数据字典
            await this.queryDictTypeList()
            // 设置表单的配置项
            this.setFormsItems()
        },
        /**
         * 查询表格数据
         */
        async queryTableData(id) {
            let params = {
                tableId: id
            }
            this.configBusModelTableConfig.tableConfig.loading = true
            try {
                let res = await getInfo(params)
                if (res.data) {
                    this.configBusModelTableConfig.tableData = res.data.rows
                    this.basicFormConfig.formSubmit = res.data.info
                    this.genInfoFormConfig.formSubmit = res.data.info
                } else {
                    this.configBusModelTableConfig.tableData = []
                }
                this.configBusModelTableConfig.tableConfig.loading = false
            } catch (error) {
                this.configBusModelTableConfig.tableConfig.loading = false
            }
        },
        /**
         * 查询数据字典
         */
        async queryDictTypeList() {
            try {
                let res = await optionselect()
                this.dictTypeList = res.data
            } catch (error) {
                this.dictTypeList = []
            }
        },
        /**
         * 表格数据被选中
         */
        tableDataSelected(rows) {
            this.configBusModelTableConfig.tableCheckedDatas = rows
        },
        /**
         * 初始化查询参数
         */
        initQueryParmas() {
            this.queryTableParams = {
                pageNo: 0,
                pageSize: 10,
                entity: {}
            }
            this.configBusModelTableConfig.tableData = []
        },

        /**
         * 搜索栏相关
         */
        /**
         * 搜索栏按钮点击
         * @param {Object} params
         */
        searchBarButtonClick(params) {
            // 清空查询参数
            this.initQueryParmas()
            try {
                this[params.prop]()
            } catch (error) {
                throw new Error(error)
            }
        },

        /**
         * 关闭弹框
         */
        handelCloseDialog() {
            this.handelInitDialog()
        },
        /**
         * 查询部门树
         */
        async queryDeptTree() {
            this.baseTreeConfig.loading = true
            try {
                let res = await menuTreeselect(this.baseTreeConfig.entity)
                if (res && res.data) {
                    this.baseTreeConfig.data = res.data
                } else {
                    this.baseTreeConfig.data = []
                }
                this.baseTreeConfig.loading = false
            } catch (error) {
                this.baseTreeConfig.loading = false
            }
        },
        /**
         * 设置(生成信息)表单的表单项
         */
        async setFormsItems() {
            // 重新设置新增、修改 表单的部门树数据配置
            this.genInfoFormConfig.formItems = setFormItemProp(
                this.genInfoFormConfig.formItems,
                'parentMenuId',
                'options',
                this.baseTreeConfig.data
            )
        },
        /**
         * 确定修改
         */
        async handelCofimeUpdate() {
            let params = {
                ...this.basicFormConfig.formSubmit,
                ...this.genInfoFormConfig.formSubmit,
                columns: [...this.configBusModelTableConfig.tableData]
            }

            params.columns.forEach(v => {
                v.isRequired = v.required ? '1' : '0'
                v.isQuery = v.query ? '1' : '0'
                v.isList = v.list ? '1' : '0'
                v.isInsert = v.insert ? '1' : '0'
                v.isEdit = v.edit ? '1' : '0'
            })
            let assRes = await editSave(params)
            if (assRes && assRes.code === 0) {
                this.$message.closeAll()
                this.$message.success({ message: '保存成功！' })
                this.handelBack()
            } else {
                this.$message.closeAll()
                this.$message.error({ message: '保存失败！' })
            }
        },

        // 返回上一页
        handelBack() {
            this.delView(this.$route)
            this.$router.push({
                path: '/gen'
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.edit-page {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );

    overflow: hidden;
    .tab-contener {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: column,
            $justify: flex-start,
            $align: flex-start,
            $flex-1: 1
        );
        .tab-pane-conetenr {
            width: 100%;
            height: 100%;
        }
    }
    .footer-contener {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-end,
            $align: center
        );

        padding-top: 10px;
    }
}
</style>
